import { computed, onMounted, ref, SetupContext } from "vue";
import { DomUtil } from "../../utils";
import { INPUT_EVENT } from "../../utils/constants";
import { SelectCommon, SelectDataItem } from "./select.type";
import useMousedownOnShow from "../../utils/hooks/useMousedownOnShow";

export default function (props: any, ctx: SetupContext, common: SelectCommon) {
  const inputHeight = ref<number>(0);
  const inputFontSize = ref<string>("16px");
  const { inputValue, listgroupOper, selectMain, selectedItems } = common;
  const inputWidth = computed(() => {
    if (props.multiple && selectedItems.ref.value.length > 0) {
      //+1是预留光标宽度
      const width = inputValue.value
        ? DomUtil.getTextWidth(inputValue.value, `font-size:${inputFontSize.value}`) + 1
        : 6;
      return width + "px";
    } else {
      return "100%";
    }
  });
  onMounted(() => {
    const selectMainEl = selectMain.value;
    if (selectMainEl) {
      useMousedownOnShow(listgroupOper.visible, selectMainEl);
      //获取input高度 保证span高度跟input高度一致
      const inputEl = selectMainEl.querySelector("input");
      if (inputEl) {
        //保证span高度跟input高度一致
        inputHeight.value = inputEl.offsetHeight;
        inputFontSize.value = DomUtil.getStyle(inputEl, "fontSize");
      }
    }
  });
  function refreshData() {
    if (props.filterData) {
      const val = inputValue.value;
      if (!val) {
        listgroupOper.setData(true);
        return;
      }
      const newData = [];
      for (let i = 0, len = props.data.length; i < len; i++) {
        const ii = props.data[i];
        if (props.filterData === true) {
          if (String(ii.text).indexOf(val + "") !== -1) {
            newData.push(ii);
          }
        } else {
          if (props.filterData(val, ii)) {
            newData.push(ii);
          }
        }
      }
      listgroupOper.setData(false, newData);
    } else {
      listgroupOper.setData(true);
    }
    listgroupOper.preSelIndex.value = -1;
  }
  function onInput() {
    if (!props.editable) return;
    const val = inputValue.value;
    ctx.emit(INPUT_EVENT, val);
    listgroupOper.visible.value = true;
    if (props.filterData) {
      refreshData();
    }
  }
  function onFocus() {
    if (props.data.length === 0 || !props.editable) return;
    listgroupOper.visible.value = true;
  }
  function keydown(e: KeyboardEvent) {
    if (!props.editable) return;
    switch (e.code) {
      case "ArrowUp":
        listgroupOper.preSelect(-1);
        break;
      case "ArrowDown":
        listgroupOper.preSelect(1);
        break;
      case "Enter":
        listgroupOper.setPreSelect();
        break;
    }
  }
  function removeItem(e: Event, item: SelectDataItem) {
    e.stopPropagation();
    selectedItems.remove(item);
    listgroupOper.visible.value = false;
  }
  function onClickSelect(e: Event) {
    const target = e.target as HTMLElement;
    const result = DomUtil.findTargetParent(target, "list-group");
    if (result) {
      return;
    }
    if (props.editable) {
      if (selectMain.value) {
        const inputEl = selectMain.value.querySelector("input");
        inputEl && inputEl.focus();
      }
    } else {
      listgroupOper.visible.value = !listgroupOper.visible.value;
    }
  }
  return {
    refreshData,
    inputWidth,
    onInput,
    onFocus,
    keydown,
    removeItem,
    onClickSelect,
    inputHeight,
  };
}
